<template>
  <view class="demand-container">
    <!-- 顶部标题 -->
    <view class="page-header">
      <text class="page-title">服务需求</text>
    </view>
    
    <!-- 表单提示 -->
    <view class="form-tip">
      <text>填写您的服务需求，我们会为您匹配合适的服务人员。</text>
    </view>
    
    <!-- 需求表单 -->
    <view class="demand-form">
      <!-- 服务类型 -->
      <view class="form-item">
        <text class="form-label">服务类型</text>
        <view class="form-input-wrapper" @click="showServiceTypeSelector">
          <text class="form-input-text">{{ formData.serviceType || '其他服务' }}</text>
          <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
        </view>
      </view>
      
      <!-- 服务地址 -->
      <view class="form-item">
        <text class="form-label">服务地址</text>
        <view class="form-input-wrapper">
          <input 
            class="form-input" 
            type="text" 
            placeholder="请输入服务地址" 
            v-model="formData.address"
          />
          <uni-icons type="location-filled" size="20" color="#999" @click="selectAddress"></uni-icons>
        </view>
      </view>
      
      <!-- 期望服务时间 -->
      <view class="form-item">
        <text class="form-label">期望服务时间</text>
        <view class="form-date-time">
          <view class="date-picker" @click="showDatePicker">
            <input 
              class="form-input" 
              type="text" 
              placeholder="选择日期" 
              disabled 
              v-model="formData.serviceDate"
            />
          </view>
          <view class="time-picker" @click="showTimePicker">
            <input 
              class="form-input" 
              type="text" 
              placeholder="上午/下午" 
              disabled 
              v-model="formData.serviceTime"
            />
            <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 详细需求描述 -->
      <view class="form-item">
        <text class="form-label">详细需求描述</text>
        <textarea 
          class="form-textarea" 
          placeholder="请详细描述您的服务需求，如服务内容、特殊要求等..." 
          v-model="formData.description"
        ></textarea>
      </view>
      
      <!-- 添加图片 -->
      <view class="form-item">
        <text class="form-label">添加图片（选填）</text>
        <view class="upload-images">
          <view 
            class="image-item" 
            v-for="(image, index) in formData.images" 
            :key="index"
          >
            <image :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @click="deleteImage(index)">
              <uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
            </view>
          </view>
          <view class="upload-btn" @click="chooseImage" v-if="formData.images.length < 3">
            <uni-icons type="camera" size="24" color="#ccc"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 预算范围 -->
      <view class="form-item">
        <text class="form-label">预算范围</text>
        <view class="form-input-wrapper" @click="showBudgetSelector">
          <text class="form-input-text">{{ formData.budget || '300-500元' }}</text>
          <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn-wrapper">
      <button class="submit-btn" @click="submitDemand">
        <text>提交需求</text>
      </button>
    </view>
    
    <!-- 历史需求 -->
    <view class="history-section">
      <view class="section-title">历史需求</view>
      <view class="history-list">
        <view class="history-item" v-for="(item, index) in historyDemands" :key="index" @click="viewHistoryDetail(item)">
          <view class="history-content">
            <view class="history-title">{{ item.title }}</view>
            <view class="history-date">{{ item.date }}</view>
            <view class="history-budget">预算: {{ item.budget }}</view>
          </view>
          <view class="history-status" :class="item.statusClass">{{ item.statusText }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 表单数据
const formData = ref({
  serviceType: '',
  address: '北京市朝阳区建国路88号',
  serviceDate: '',
  serviceTime: '下午',
  description: '',
  images: [],
  budget: '300-500元'
});

// 历史需求数据
const historyDemands = ref([
  {
    id: '1',
    title: '空调清洗与维修',
    date: '2023-05-15',
    budget: '300-500元',
    status: 'completed',
    statusText: '已完成',
    statusClass: 'status-completed'
  },
  {
    id: '2',
    title: '老人护理服务',
    date: '2023-06-01',
    budget: '1000元以上',
    status: 'processing',
    statusText: '处理中',
    statusClass: 'status-processing'
  }
]);

// 显示服务类型选择器
const showServiceTypeSelector = () => {
  uni.showActionSheet({
    itemList: ['家居清洁', '家电维修', '搬家服务', '家居安装', '其他服务'],
    success: function(res) {
      const serviceTypes = ['家居清洁', '家电维修', '搬家服务', '家居安装', '其他服务'];
      formData.value.serviceType = serviceTypes[res.tapIndex];
    }
  });
};

// 选择地址
const selectAddress = () => {
  uni.chooseLocation({
    success: function(res) {
      formData.value.address = res.address;
    }
  });
};

// 显示日期选择器
const showDatePicker = () => {
  uni.showDatePicker({
    success: function(res) {
      formData.value.serviceDate = res.date;
    }
  });
};

// 显示时间段选择器
const showTimePicker = () => {
  uni.showActionSheet({
    itemList: ['上午', '下午', '晚上'],
    success: function(res) {
      const timePeriods = ['上午', '下午', '晚上'];
      formData.value.serviceTime = timePeriods[res.tapIndex];
    }
  });
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - formData.value.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: function(res) {
      formData.value.images = [...formData.value.images, ...res.tempFilePaths];
    }
  });
};

// 删除图片
const deleteImage = (index) => {
  formData.value.images.splice(index, 1);
};

// 显示预算范围选择器
const showBudgetSelector = () => {
  uni.showActionSheet({
    itemList: ['300-500元', '500-800元', '800-1000元', '1000元以上'],
    success: function(res) {
      const budgetRanges = ['300-500元', '500-800元', '800-1000元', '1000元以上'];
      formData.value.budget = budgetRanges[res.tapIndex];
    }
  });
};

// 提交需求
const submitDemand = () => {
  // 表单验证
  if (!formData.value.serviceType) {
    uni.showToast({
      title: '请选择服务类型',
      icon: 'none'
    });
    return;
  }
  
  if (!formData.value.address) {
    uni.showToast({
      title: '请输入服务地址',
      icon: 'none'
    });
    return;
  }
  
  if (!formData.value.serviceDate) {
    uni.showToast({
      title: '请选择服务日期',
      icon: 'none'
    });
    return;
  }
  
  if (!formData.value.description) {
    uni.showToast({
      title: '请填写需求描述',
      icon: 'none'
    });
    return;
  }
  
  // 提交表单
  uni.showLoading({
    title: '提交中...'
  });
  
  // 模拟提交请求
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '提交成功',
      icon: 'success'
    });
    
    // 重置表单
    formData.value = {
      serviceType: '',
      address: '',
      serviceDate: '',
      serviceTime: '下午',
      description: '',
      images: [],
      budget: '300-500元'
    };
    
    // 跳转到需求列表页面
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/demand/list'
      });
    }, 1500);
  }, 1000);
};

// 查看历史需求详情
const viewHistoryDetail = (item) => {
  uni.navigateTo({
    url: `/pages/demand/detail?id=${item.id}`
  });
};
</script>

<style lang="scss" scoped>
.demand-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

// 顶部标题
.page-header {
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .page-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
}

// 表单提示
.form-tip {
  padding: 20rpx 30rpx;
  background-color: #f5f5f5;
  
  text {
    font-size: 28rpx;
    color: #999;
    line-height: 1.5;
  }
}

// 需求表单
.demand-form {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .form-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .form-label {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 15rpx;
    }
    
    .form-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      height: 90rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      
      .form-input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
      }
      
      .form-input-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
      
      .uni-icons {
        margin-left: 10rpx;
      }
    }
    
    .form-date-time {
      display: flex;
      justify-content: space-between;
      
      .date-picker, .time-picker {
        position: relative;
        
        .form-input {
          text-align: center;
        }
      }
      
      .date-picker {
        width: 60%;
        margin-right: 20rpx;
      }
      
      .time-picker {
        width: 35%;
        display: flex;
        align-items: center;
        
        .form-input {
          flex: 1;
        }
        
        .uni-icons {
          position: absolute;
          right: 20rpx;
        }
      }
    }
    
    .form-textarea {
      width: 100%;
      height: 200rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 20rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
    
    .upload-images {
      display: flex;
      flex-wrap: wrap;
      
      .image-item, .upload-btn {
        width: 180rpx;
        height: 180rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 8rpx;
        overflow: hidden;
      }
      
      .image-item {
        position: relative;
        
        image {
          width: 100%;
          height: 100%;
        }
        
        .delete-btn {
          position: absolute;
          top: 10rpx;
          right: 10rpx;
          width: 40rpx;
          height: 40rpx;
          border-radius: 20rpx;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      
      .upload-btn {
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed #ddd;
      }
    }
  }
}

// 提交按钮
.submit-btn-wrapper {
  padding: 30rpx;
  
  .submit-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #ff7a45;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    text-align: center;
    box-shadow: 0 6rpx 10rpx rgba(255, 122, 69, 0.2);
    
    &:active {
      opacity: 0.9;
    }
  }
}

// 历史需求部分
.history-section {
  background-color: #fff;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .history-list {
    .history-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .history-content {
        flex: 1;
        
        .history-title {
          font-size: 30rpx;
          color: #333;
          font-weight: bold;
          margin-bottom: 10rpx;
        }
        
        .history-date {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 6rpx;
        }
        
        .history-budget {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .history-status {
        font-size: 26rpx;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
        
        &.status-completed {
          background-color: #e6f7ff;
          color: #1890ff;
        }
        
        &.status-processing {
          background-color: #fff7e6;
          color: #fa8c16;
        }
        
        &.status-pending {
          background-color: #f5f5f5;
          color: #666;
        }
        
        &.status-cancelled {
          background-color: #f5f5f5;
          color: #999;
        }
      }
    }
  }
}

// 适配底部安全区
@supports (bottom: constant(safe-area-inset-bottom)) {
  .demand-container {
    padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
  }
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .demand-container {
    padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  }
}

// 空状态提示
.empty-tip {
  padding: 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>